<template>
  <div class="taskbar">
    <!-- 开始按钮 -->
    <div class="start-btn" :class="{ 'start-btn__active': LocalStartMenu.opened }" @mousedown.stop="LocalStartMenu.toggle" v-ripple>
      <v-icon :icon="mdiMicrosoftWindows" />
    </div>

    <!-- 任务图标区域 -->
    <div class="task-icons">
      <div class="task-icon" v-for="item in useWindowStore.windows" :class="{ 'task-icon__active': item.id === Icon.active && !item.minimized }" @click="Icon.click(item)">
        <img :src="item.icon"  alt=""/>
      </div>
    </div>

    <!-- 右侧通知栏 -->
    <div class="system-tray">
      <span>🔊</span>
      <span>🌐</span>
      <span>🕒</span>
    </div>
  </div>
  <start-menu v-model:open="LocalStartMenu.opened" />
</template>

<script lang="ts" setup>
import { mdiMicrosoftWindows } from "@mdi/js";
import StartMenu from "@/components/windows/components/bottomtaskbar/startMenu/StartMenu.vue";
import { useWindowStore, type Window } from "@/components/windows/actives/activeWindow.ts";

const LocalStartMenu = (() => {
  const close = () => {
    s.opened = false;
  };
  const s = reactive({
    opened: false,
    close,
    toggle() {
      s.opened = !s.opened;
    },
  });
  return s;
})();
const Icon = (() => {
  const click = (item:Window) => {
    if (!item.minimized) {
      useWindowStore.minimizeWindow(item.id)
      return;
    }
    s.active = item.id
    useWindowStore.focusWindow(item.id);
  };
  const s = reactive({
    active: "",
    click
  });
  return s;
})();
</script>

<style scoped lang="scss">
@use "@/components/windows/styles/index.scss";
$btn__active: rgba(255, 255, 255, 0.2);
//底部任务栏
.taskbar {
  display: flex;
  align-items: center;
  color: white;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10000;
}

//开始菜单按钮
.start-btn {
  width: 50px;
  height: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    @include index.btn__hover;
  }

  &__active {
    @include index.btn__hover
  }
}

//任务栏标签区域
.task-icons {
  flex: 1;
  display: flex;
  justify-content: start;
  height: 100%;
  //任务栏标签
  .task-icon {
    position: relative;
    width: 50px;
    height: 100%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    //底部白色线
    &::after {
      content: "";
      position: absolute;
      left: 50%; // 初始时居中
      bottom: 0;
      width: 80%; // 初始宽度 80%
      height: 2px;
      background: white;
      transform: translateX(-50%); // 让它保持居中
      transition: width 0.3s ease-in-out;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      user-select: none;
      text-align: center;
    }
    &__active {
      @include index.btn__hover;
      &::after {
        width: 100%;
      }
    }
    &:hover {
      @include index.btn__hover;
      &::after {
        width: 100%;
      }
    }
  }

}

.system-tray {
  display: flex;
  gap: 12px;
  font-size: 18px;
  padding-right: 10px;
}
</style>
